<template>
  <div>
    <div class="box_item_zhxx_info">
      <el-descriptions :column="2" border title="账号信息">
        <el-descriptions-item
          v-for="(item, index) in descriptions"
          :key="index"
          label-class-name="my-label_zx"
          content-class-name="my-content_zx"
          :label="item.name"
          :span="item.span"
          ><span v-if="!item.type" style="margin-left: 15px">{{
            item.value
          }}</span>
          <el-input
            v-if="item.type"
            v-model="item.value"
            disabled
            placeholder="请输入内容"
            :show-password="item.ispass ? item.ispass : false"
          >
            <template slot="append">
              <i
                v-if="item.value != ''"
                class="el-icon-edit-outline"
                @click="edit(item, index)"
              ></i>
            </template>
          </el-input>
        </el-descriptions-item>
      </el-descriptions>
    </div>
    <el-dialog
      :title="title"
      :visible.sync="dialogVisible"
      width="6rem"
      :close-on-click-modal="false"
      @close="close()"
    >
      <div class="tc_box">
        <el-input
          v-for="(item, index) in list"
          :key="index"
          :placeholder="'请输入' + item.name"
          v-model="item.value"
          :class="{ code: item.code }"
          :show-password="item.ispass ? item.ispass : false"
        >
          <template slot="prepend">{{ item.name }}</template>
          <template slot="append" v-if="item.iscode"
            ><p style="cursor: pointer" @click="check()" v-if="isSend">
              发送验证码
            </p>
            <p v-if="!isSend">{{ sendmsg }}</p></template
          >
        </el-input>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="Submit()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
  <script>
export default {
  data() {
    return {
      /**
       * span：占几列
       * value:赋值，要在下面的方法进行数据转化
       * type:显示的类型,是否可以修改
       */
      descriptions: [
        {
          id: 1,
          name: "用户名",
          value: "",
          span: 1,
          type: false,
          lable: "name",
        },
        {
          id: 2,
          name: "手机号",
          value: "",
          span: 1,
          type: true,
          lable: "mobile",
        },
        {
          id: 3,
          name: "单位",
          value: "",
          span: 1,
          type: false,
          lable: "company",
        },
        {
          id: 4,
          name: "民族",
          value: "",
          span: 1,
          type: false,
          lable: "nation",
        },
        {
          id: 5,
          name: "密码",
          value: "12345678",
          span: 1,
          type: true,
          ispass: true,
        },
      ],

      formData: {}, //修改的信息
      dialogVisible: false, //弹窗
      title: "", //弹窗标题
      list: [], //要显示的input有哪些
      type: 0, //修改的类型。0代表手机号

      sendmsg: "发送验证码",
      isSend: true,
      timeFun: "", //定时器
      timer: 60, //定时时间
    };
  },
  mounted() {
    this.getinfo();
  },
  methods: {
    /**
     * 获取信息
     */
    getinfo() {
      let data = {};
      this.$http.post("expert/basic", data).then((res) => {
        this.descriptions.forEach((item, index) => {
          for (const [key, value] of Object.entries(res.data)) {
            if (item.lable == key) {
              item.value = value;
            }
          }
        });
      });
    },
    /**
     *
     * 打开弹窗
     * @param {信息数据} e
     * @param {信息数据的下标} i
     *
     */
    edit(e, i) {
      this.title = `修改${e.name}`;
      this.dialogVisible = true;
      if (e.name == "密码") {
        this.type = 1;
        this.list = [
          {
            id: 1,
            name: "旧密码",
            value: "",
            iscode: false,
            ispass: true,
          },
          { id: 2, name: "新密码", value: "", iscode: false, ispass: true },
          { id: 3, name: "确认密码", value: "", iscode: false, ispass: true },
        ];
        return;
      }
      if (e.name == "手机号") {
        this.type = 0;
        this.list = [
          {
            id: 1,
            name: "旧手机号",
            value: "",
            iscode: false,
          },
          { id: 2, name: "新手机号", value: "", iscode: false },
          { id: 3, name: "验证码", value: "", iscode: true },
        ];
        return;
      }
    },
    /**
     * 提交修改
     */
    Submit() {
      let vmodel = [];

      let url = "";
      if (this.type == 0) {
        //手机号
        vmodel = ["mobile", "newmobile", "captcha"];
        url = "expert/changemobile";
      } else {
        vmodel = ["password", "newpassword", "repassword"];
        url = "expert/user_resetpwd";
      }
      this.formData = this.$self.seach(this.list, vmodel);

      // console.log(JSON.stringify(this.formData));

      if (this.type == 1) {
        if (this.formData.newpassword != this.formData.repassword) {
          this.$message({
            message: "两次密码不一致",
            type: "error",
          });
          return;
        }
      }
      //接口
      let data = this.formData;
      this.$http.post(url, data).then((res) => {
        this.$self.ts(res, 3).then(() => {
          this.getinfo();

          this.isSend = true;
          this.timer = 60;
          this.sendmsg = "发送验证码";
          clearInterval(this.timeFun);
          this.dialogVisible = false;
        });
      });
    },
    /**
     * 发送验证码
     */
    check() {
      console.log(this.list[1].value);
      if (this.list[1].value == "") {
        this.$message({
          message: "请输入新手机号",
          type: "error",
        });
        return;
      }

      let data = {
        mobile: this.list[1].value,
        type: 3,
        event: "resetpwd",
      };
      this.$http.post("sms/send", data).then((res) => {
        this.$self.ts(res).then(() => {
          this.isSend = false;
          let timer = this.timer;
          this.sendmsg = "倒计时 " + timer + " s";
          this.timeFun = setInterval(() => {
            --timer;
            this.sendmsg = "倒计时 " + timer + " s";
            if (timer == 0) {
              this.isSend = true;
              this.sendmsg = "重新发送";
              clearInterval(this.timeFun);
            }
          }, 1000);
        });
      });
    },
    /**
     * 关闭弹窗，清除定时器
     */
    close() {},
    //  ==
  },
};
</script>
  <style>
.box_item_zhxx_info {
  width: 13rem;
  margin: auto;
}
.box_item_zhxx_info .el-descriptions__header {
  height: 0.5rem;
  background: #1954a4;
  font-size: 0.2rem;
  font-weight: bold;
  color: #ffffff;
  line-height: 0.375rem;
  padding-left: 0.3375rem;
}
.box_item_zhxx_info .el-descriptions__header {
  margin: 0;
}
.box_item_zhxx_info .my-label_zx {
  background: #ffffff !important;
  border-right: none !important;
  min-width: 74px;
}
.box_item_zhxx_info .my-content_zx {
  border-left: none !important;
  height: 51px !important;
}
.box_item_zhxx_info .el-input .el-input__inner {
  border: none !important;
}
.box_item_zhxx_info .el-descriptions .is-bordered .el-descriptions-item__cell {
  padding-top: 0;
  padding-bottom: 0;
}
.box_item_zhxx_info .el-input-group__append {
  border: none !important;
  background: #ffffff;
  color: #1954a4 !important;
  padding: 0 0.125rem;
}
.box_item_zhxx_info .el-input-group__append i {
  cursor: pointer;
}
.box_item_zhxx_info .el-input.is-disabled .el-input__inner {
  background: #ffffff;
  color: #333;
}
.tc_box .el-input {
  margin-top: 0.2375rem;
}
.tc_box .el-input-group--append .el-input__inner {
  /* border-right: none !important; */
}
.tc_box .el-input-group__prepend {
  width: 55px;
}
.tc_box .el-input-group__append {
  background: #ffffff;
  border-left: none !important;
  padding: 0% 3px 0 3px;
}
</style>